<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Mouseover与Mouseenter的问题</title>
		<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
		<style type="text/css">
			#d1{
				background-color: #000;
				position: relative;
				height: 300px;
				width: 300px;
			}
			
			#d1.hover{
				background-color: aquamarine;
			}
			#d2{
				background-color: #f00;
				position: absolute;
				left: 50px;
				top: 50px;
				width: 200px;
				height: 200px;
			}
			
			#d3{
				background-color: #0f0;
				position: absolute;
				left: 50px;
				top: 50px;
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			<div id="d2">
				<div id="d3"></div>
			</div>
		</div>
		
		<script type="text/javascript">
			// 1. mouseover, mouseout, 再进出子元素的时候都会触发
			// (这是不希望看的！)
			// $('#d1').mouseover(function(e){
			// 	console.log('[IN] mouseover ' + e.target.id);
			// }).mouseout(function(e){
			// 	console.log('[OUT] mouseout ' + e.target.id);
			// });
			
			// 只显示#d1的冒泡，把底下的事件阻塞掉！
			// mouseenter,mouseleave, 再进出子元素时不会触发
			// $('#d1').mouseenter(function(e){
			// 	console.log('[IN] mouseenter ' + e.target.id);
			// }).mouseleave(function(e){
			// 	console.log('[OUT] mouseleave ' + e.target.id);
			// });
			
			// 3.用hover代替mouseenter和mouseleave
			
			$('#d1').hover(
				function(e){
					console.log('[IN] hover f1 ' + e.target.id);
				},
				function(e){
					console.log('[OUT] hover f2 ' + e.target.id);
			});
			
			// $('#d1').hover(function(e){
			// 	$(e.target).toggleClass('hover');
			// })
			
			
		</script>
	</body>
</html>
